import React, { Suspense } from 'react';
import { RouteObject } from 'react-router-dom';
import RootLayout from './components/RootLayout';
import AuthGuard from './components/AuthGuard';
import UnAuthGuard from './components/UnAuthGuard';
import CustomLoader from 'components/CustomLoader';
import ErrorBoundary from './components/ErrorBoundary';

// 使用懒加载
const Login = React.lazy(() => import('./pages/login'));
const Dashboard = React.lazy(() => import('./pages/dashboard'));
const Meetings = React.lazy(() => import('./pages/meetings'));
const NotFound = React.lazy(() => import('./pages/notfound'));

// Wrapper component for lazy-loaded components
const LazyWrapper: React.FC<{ component: React.ReactNode }> = ({ component }) => (
  <Suspense fallback={<CustomLoader />}>
    {component}
  </Suspense>
);

// 路由配置
const routes: RouteObject[] = [
  {
    path: '/login',
    element: (
      <UnAuthGuard>
        <LazyWrapper component={<Login />} />
      </UnAuthGuard>
    ),
    errorElement: <ErrorBoundary />,
  },
  {
    path: '/',
    element: (
      <AuthGuard>
        <RootLayout />
      </AuthGuard>
    ),
    errorElement: <ErrorBoundary />,
    children: [
      {
        path: 'dashboard',
        element: <LazyWrapper component={<Dashboard />} />,
      },
      {
        path: 'meetings',
        element: <LazyWrapper component={<Meetings />} />,
      },
      {
        path: '*',
        element: <LazyWrapper component={<NotFound />} />,
      }
    ]
  }
];

export default routes;
